<template>
    
        <el-menu
        :default-active="activeIndex"
        class="topbar"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        >
        <el-menu-item index="1"><i class="el-icon-loading"></i><a >问卷风</a></el-menu-item>
        <el-menu-item index="2"><i class="el-icon-user"></i>{{this.account.nickName}}</el-menu-item>
        <el-menu-item index="3">返回首页</el-menu-item>
        <el-menu-item index="4" >退出登录</el-menu-item>
        </el-menu>
    
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '2',
        account:{  //登录的帐号密码
              userId:'',
              pwd: '',
              userName:'',
              nickName:''
        },
          
      };
    },
    methods: {
        //可以在这里处理点击事件
      handleSelect(key, keyPath) {
          //点击问卷风事件
        if(key==1){
            this.$alert('该网站为问卷风，作为现代软件开发的期末考核而开发', '提示', {
                confirmButtonText: '确定',
            });
          }
        else if(key==2){
            this.$alert('当前为登录状态', '提示', {
                confirmButtonText: '确定',
            });
        }
        else if(key==3){
            this.$router.push('/home')
        }
        else if(key==4){
             this.$router.push('/login')
        }
        console.log(key,keyPath);
      }
    },
    created () {
        // console.log(this.$store.state.account);
         console.log(sessionStorage.nickName);
        this.account.userName=sessionStorage.userName;
        this.account.nickName=sessionStorage.nickName;

    }
  }
</script>
<style >
.topbar{
    list-style-type: none;
    margin: 0;
    padding: 0;
   
}
</style>